<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Active Pet</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ng-container *ngIf="(gameService.player$ | async) as player">
    <div class="blank-slate" *ngIf="!player?.$petsData?.currentPet">
      You have no current pet.
    </div>

    <ng-container *ngIf="player.$petsData.allPets[player.$petsData.currentPet] as pet">

      <ion-row>
        <ion-col size-xs="12" offset-xs="0" size-md="8" offset-md="2" class="ion-padding">
          
          <ion-card>
            <ion-card-header>
              <ion-card-subtitle>
                <ion-row class="full-width">
                  <ion-col size="9" class="vertical-center">
                    Level {{ pet.level.__current }}/{{ pet.level.maximum }}
                    &nbsp;
                    <ion-badge color="tertiary">{{ pet.rating }}★{{ pet.typeName }}</ion-badge>
                  </ion-col>

                  <ion-col size="3">
                    <ion-button color="dark" class="ion-float-right" fill="outline" size="small" (click)="petActions($event)">
                      <ion-icon slot="icon-only" name="more"></ion-icon>
                    </ion-button>
                  </ion-col>
                </ion-row>

              </ion-card-subtitle>
              <ion-card-title>{{ pet.name }}</ion-card-title>
            </ion-card-header>

            <ion-card-content>
              <ion-list>

                <ion-item *ngIf="pet.level.__current === pet.level.maximum && pet.rating < 5">
                  <ion-icon slot="start" [src]="'assets/icon/symbol-ascend.svg'"></ion-icon>
  
                  <span class="ion-padding-start">Would you like to enhance your pet?</span>
  
                  <ion-button slot="end" color="primary" (click)="ascend(pet)">Enhance</ion-button>
                </ion-item>

                <ion-item>
                  <app-gendervatar slot="start" [gender]="pet.gender"></app-gendervatar>
                  
                  <span class="ion-padding-start">{{ pet.gender }}</span>
                </ion-item>

                <ion-item>
                  <ion-icon slot="start" [src]="'assets/icon/stat-affinity.svg'"></ion-icon>
                  
                  <span class="ion-padding-start">Affinity: {{ pet.affinity }}</span>
                </ion-item>

                <ion-item>
                  <ion-icon slot="start" [src]="'assets/icon/stat-attribute.svg'"></ion-icon>
                  
                  <span class="ion-padding-start">Attribute: {{ pet.attribute }}</span>
                </ion-item>

                <ion-item>
                  <ion-icon slot="start" [src]="'assets/icon/stat-xp.svg'"></ion-icon>

                  <span class="ion-padding-start">{{ pet.xp.__current | number }} / {{ pet.xp.maximum | number }} XP</span>
                </ion-item>

                <ion-item>
                  <ion-icon slot="start" [src]="'assets/icon/stat-gold.svg'"></ion-icon>

                  <span class="ion-padding-start">{{ pet.gold.__current | number }} / {{ pet.gold.maximum | number }} Gold</span>

                  <ion-button slot="end" (click)="takeGold()" *ngIf="pet.gold.__current > 0">Take</ion-button>
                </ion-item>

                <ion-item *ngIf="pet.gatherTick">
                  <ion-icon slot="start" [src]="'assets/icon/stat-itemfind.svg'"></ion-icon>

                  <span class="ion-padding-start"><countdown-timer [end]="pet.gatherTick"></countdown-timer> until next gather</span>
                </ion-item>
              </ion-list>
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col size-xs="12" offset-xs="0" size-md="8" offset-md="2" class="ion-padding">
          
          <ion-card>
            <ion-card-header>
              <ion-card-title>Pet Ability</ion-card-title>
            </ion-card-header>

            <ion-card-content>
              <ion-list>
                <ion-item>
                  <ion-icon slot="start" [src]="'assets/icon/stat-stamina.svg'"></ion-icon>
  
                  <span class="ion-padding-start">
                    {{ player.name }} has {{ player.stamina.__current }}/{{ player.stamina.maximum }} stamina
                  </span>
                </ion-item>
  
                <ion-item-divider>Special Action</ion-item-divider>
                <ion-item button 
                          color="primary" 
                          *ngIf="pet.$attribute" 
                          (click)="oocAction()" 
                          [disabled]="player.stamina.__current < pet.$attribute.oocAbilityCost">
                  {{ pet.$attribute.oocAbilityName }} ({{ pet.$attribute.oocAbilityCost }} Stamina)
                </ion-item>
  
                <ion-item class="ion-text-wrap" *ngIf="pet.$attribute">
                  {{ pet.$attribute.oocAbilityDesc }}
                </ion-item>
              </ion-list>
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col size-xs="12" offset-xs="0" size-md="8" offset-md="2" class="ion-padding">
          
          <ion-card>
            <ion-card-header>
              <ion-card-title>Upgrades</ion-card-title>
            </ion-card-header>

            <ion-card-content>
              <ion-list>

                <ion-item *ngFor="let upgrade of properUpgradeNames | keyvalue" [class.ion-hide]="!pet.$nextUpgrade[upgrade.key] && pet.$currentUpgrade[upgrade.key].c === 0">

                  <ion-label class="ion-text-wrap">
                    <h3>{{ upgrade.value }}</h3>
                    <p *ngIf="!pet.$nextUpgrade[upgrade.key]">Max Upgrade Level ({{ pet.$currentUpgrade[upgrade.key].v | number }}{{ properUpgradeSuffixes[upgrade.key] }})</p>
                    <p *ngIf="pet.$nextUpgrade[upgrade.key]">
                      Current: {{ pet.$currentUpgrade[upgrade.key].v | number }}{{ properUpgradeSuffixes[upgrade.key] }} / Next: {{ pet.$nextUpgrade[upgrade.key].v | number }}{{ properUpgradeSuffixes[upgrade.key] }}
                      <br>
                      Upgrade Cost: {{ pet.$nextUpgrade[upgrade.key].c | number }}g <span *ngIf="pet.$nextUpgrade[upgrade.key].a">/ Requires {{ pet.$nextUpgrade[upgrade.key].a }}★</span>
                    </p>
                  </ion-label>

                  <ion-button slot="end" 
                              size="small"
                              *ngIf="pet.$nextUpgrade[upgrade.key]" 
                              [disabled]="player.gold < pet.$nextUpgrade[upgrade.key].c || pet.rating < (pet.$nextUpgrade[upgrade.key].a || 0)" 
                              (click)="upgradeAttr(upgrade.key)">Upgrade</ion-button>
                </ion-item>

              </ion-list>
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col size-xs="12" offset-xs="0" size-md="8" offset-md="2" class="ion-padding">
          
          <ion-card>
            <ion-card-header>
              <ion-card-title>Permanent Upgrades</ion-card-title>
            </ion-card-header>

            <ion-card-content>
              <ion-list>

                <ion-item *ngFor="let upgrade of pet.permanentUpgrades | keyvalue">

                  <ion-label class="ion-text-wrap">
                    <h3>{{ properPermanentUpgradeNames[upgrade.key] }} +{{ upgrade.value }}</h3>
                  </ion-label>
                </ion-item>

              </ion-list>
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col size-xs="12" offset-xs="0" size-md="8" offset-md="2" class="ion-padding">
          
          <ion-card>
            <ion-card-header>
              <ion-card-title>Stats</ion-card-title>
            </ion-card-header>
  
            <ion-card-content *ngIf="pet.stats">
              
              <ion-list>
                <ion-item-divider>Vital Stats</ion-item-divider>
  
                <ion-item>
                  <ion-button fill="outline" 
                              slot="start"
                              color="dark" 
                              class="ion-margin-end"
                              (click)="showTrail(pet.$statTrail.hp, 'hp', pet.stats.hp)">
                    <ion-icon slot="icon-only" [src]="'assets/icon/stat-hp.svg'"></ion-icon>
                  </ion-button>
                  
                  <ion-label>
                    <strong class="ion-margin-end">HP</strong> {{ pet.stats.hp | number }}
                  </ion-label>
                </ion-item>
  
                <ion-item>
                  <ion-button fill="outline" 
                              slot="start"
                              color="dark" 
                              class="ion-margin-end"
                              (click)="showTrail(pet.$statTrail.xp, 'xp', pet.stats.xp)">
                    <ion-icon slot="icon-only" [src]="'assets/icon/stat-xp.svg'"></ion-icon>
                  </ion-button>
                  
                  <ion-label>
                    <strong class="ion-margin-end">XP Boost</strong> {{ pet.stats.xp | number }}
                  </ion-label>
                </ion-item>
  
                <ion-item>
                  <ion-button fill="outline" 
                              slot="start"
                              color="dark" 
                              class="ion-margin-end"
                              (click)="showTrail(pet.$statTrail.gold, 'gold', pet.stats.gold)">
                    <ion-icon slot="icon-only" [src]="'assets/icon/stat-gold.svg'"></ion-icon>
                  </ion-button>
                  
                  <ion-label>
                    <strong class="ion-margin-end">Gold Boost</strong> {{ pet.stats.gold | number }}
                  </ion-label>
                </ion-item>
  
                <ion-item-divider>Primary Stats</ion-item-divider>
  
                <ion-item *ngFor="let stat of ['str', 'int', 'dex', 'agi', 'con', 'luk']">
                  <ion-button fill="outline" 
                              slot="start"
                              color="dark" 
                              class="ion-margin-end"
                              (click)="showTrail(pet.$statTrail[stat], stat, pet.stats[stat])">
                    <ion-icon slot="icon-only" [src]="'assets/icon/stat-' + stat + '.svg'"></ion-icon>
                  </ion-button>
                  
                  <ion-label>
                    <strong class="stat-fixed-width">{{ stat.toUpperCase() }}</strong> {{ pet.stats[stat] | number }}
                  </ion-label>
                </ion-item>
              </ion-list>
  
            </ion-card-content>
          </ion-card>
  
        </ion-col>
      </ion-row>
    </ng-container>
  </ng-container>
</ion-content>
